 <template>
    <div class="userinfor">
        <div class="headimg" @click="headimg">
            <img :src="headimgpos" />
        </div>
        <div class="textinfor">
            <div class="username">
                <span>{{name}}</span>
            </div>
            <div class="call">
                <div><span>电话号：</span></div>
                <div><span>{{callcode}}</span></div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import {
  // ref,
  onMounted,
  // onUpdated,
  computed,
} from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

export default {
  name: 'Userinfor',
  setup() {
    // 初始化路由
    const router = useRouter();
    // 初始化store
    const store = useStore();
    const name = computed(() => store.state.basicinfor.userinfor.name);
    const callcode = computed(() => store.state.basicinfor.userinfor.callcode);
    const headimgpos = computed(() => store.state.basicinfor.userinfor.headimg);
    // 获取用户信息
    function obtaininfor() {
      // 获取token值
      const token = JSON.parse(window.sessionStorage.getItem('token'));
      axios({
        // 方法
        method: 'post',
        // 请求地址
        url: 'http://1.14.122.88:5001/my/obtaininfor',
        // token验证的请求头
        headers: { authorization: token },
      }).then(
        (response) => {
          if (response.data.status === 2) {
            // 储存用户信息到vuex
            store.commit('STORAGEINFOR', response.data.userinfor);
          }
        },
        (error) => {
          console.log('获取用户信息失败', error.message);
        },
      );
    }

    // 组件挂载时
    onMounted(() => {
      if (!store.state.basicinfor.userinfor) {
        obtaininfor();
      }
    });

    // 渲染数据时
    // onUpdated(() => {
    //   name.value = Store.state.userinfor.name;
    //   callcode.value = Store.state.userinfor.callcode;
    // });

    // 跳转到上传头像的页面
    function headimg() {
      router.push('/Upheadimg');
    }
    return {
      name,
      callcode,
      headimgpos,
      headimg,
    };
  },
};
</script>

<style scoped>
    .userinfor{
        display: flex;
        width: 100%;
        height: 150px;
        background-color: #ffffff;
        margin-bottom: 10px;
        padding: 50px 5px 0px;
    }
    .head{
        flex: 1;
    }
    .headimg img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: 0 15px;
        border-radius: 5px;
    }
    .textinfor{
        text-align: left;
    }
    .username{
        font-size: 20px;
        font-weight: 700;
    }
    .call{
        margin-top: 10px;
        font-size: 15px;
        color: #a1a1a1;
    }
</style>
